<template>
  <div>
    <div class="top">
      <div class="left">
        <img src="./images/touxiang.png" alt="" />
        <div class="centent">
          <p class="p1">{{ LoginStore.nickName }}</p>
          <p class="p2">普通用户</p>
        </div>
      </div>
      <span class="iconfont icon-qrcode-1-copy"></span>
      <div class="right">
        <div class="pro">
          <span class="iconfont icon-shandian"></span>
          <div class="content">
            <p>Pro会员</p>
            <p>立即开通</p>
          </div>
        </div>
      </div>
    </div>
    <div class="">
      <div class="asset">
        <p>我的资产</p>
      </div>
      <div class="money">
        <div>
          <p class="p1">¥<span>0</span></p>
          <p>余额</p>
        </div>
        <div>
          <p>0</p>
          <p>余额</p>
        </div>
        <div>
          <p>0</p>
          <p>优惠卷</p>
        </div>
        <div>
          <p>0</p>
          <p>积分</p>
        </div>
        <div>
          <p>0</p>
          <p>礼品卡</p>
        </div>
      </div>
      <div class="bottoms">
        <div class="bottom bottom1">
          <span class="iconfont icon-dingdan1"></span>
          <p>我得订单</p>
        </div>
        <div class="bottom bottom1">
          <span class="iconfont icon-zhanghaoguanli"></span>
          <p>账号管理</p>
        </div>
        <div class="bottom bottom2">
          <span class="iconfont icon-shouji"></span>
          <p>我的手机号</p>
        </div>
        <div class="bottom bottom1">
          <span class="iconfont icon-rili4"></span>
          <p>周六一起拼</p>
        </div>
        <div class="bottom bottom1">
          <span class="iconfont icon-shouhou"></span>
          <p>售后服务</p>
        </div>
        <div class="bottom bottom2">
          <span class="iconfont icon-yaoqingma"></span>
          <p>邀请返利</p>
        </div>
        <div class="bottom bottom1">
          <span class="iconfont icon-gouwu"></span>
          <p>优先购</p>
        </div>
        <div class="bottom bottom1">
          <span class="iconfont icon-wodejifen"></span>
          <p>积分中心</p>
        </div>
        <div class="bottom bottom2">
          <span class="iconfont icon-huiyuan1"></span>
          <p>会员俱乐部</p>
        </div>
        <div class="bottom bottom1">
          <span class="iconfont icon-dizhi1"></span>
          <p>地址管理</p>
        </div>
        <div class="bottom bottom1">
          <span class="iconfont icon-anquan"></span>
          <p>支付安全</p>
        </div>
        <div class="bottom bottom2">
          <span class="iconfont icon-weibiaoti-"></span>
          <p>帮助与客服</p>
        </div>
        <div class="bottom bottom3">
          <span class="iconfont icon-yijianfankui"></span>
          <p>意见反馈</p>
        </div>
        <div class="bottom bottom3">
          <span class="iconfont icon-sifapaimai"></span>
          <p>我的竞拍</p>
        </div>
      </div>
      <button class="btn" @click="removetoken">退出登录</button>
    </div>
    <tabbar class="box"></tabbar>
  </div>
</template>

<script setup lang="ts">
import tabbar from "../../components/tabbar/tabar.vue";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { getLoginStore } from "../../stores/login";
let router = useRouter();
let LoginStore = getLoginStore();
onMounted(() => {
  reqList();

  //  Jumplogin()
});

// const Jumplogin = ()=>{
//   console.log(LoginStore.nickName);

//   if(!LoginStore.nickName){
//       router.push('/login')
//   }else{
//     return
//   }
// }
// const pathlogin = ()=>{
//   router.push('/login')
// }
const reqList = () => {
  LoginStore.reggetuser();
};
const removetoken = async () => {
  try {
    await LoginStore.removetoken();
    router.push("/login");
  } catch (error) {
    ElMessage({
      type: "error",
      message: "退出失败请刷新重试",
    });
  }
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 135px;
  background: url(./images/top1.png) no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top .left {
  display: flex;
  align-items: center;
}
.top .left img {
  width: 71px;
  height: 71px;
  border-radius: 50%;
  margin-left: 15px;
  margin-right: 15px;
}
.top .centent .p1 {
  font-size: 18px;
  color: white;
}
.top .centent .p2 {
  font-size: 14px;
  color: white;
}

.top > .iconfont {
  font-size: 17px;
  position: absolute;
  top: 35px;
  right: 20px;
}
.top .right .pro {
  width: 111px;
  height: 42px;
  margin-top: 50px;
  display: flex;
  align-items: center;
  background-image: linear-gradient(180deg, #574e44, #0e0e0e);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  animation-name: tran;
  animation-duration: 1s;
  animation-direction: alternate-reverse;
  transition-timing-function: linear;
  animation-iteration-count: 7;
}
.top .right .pro > .iconfont {
  width: 24px;
  height: 28px;
  background: red;
  border-radius: 50%;
  font-size: 20px;
  color: #f9e0c0;
  padding-left: 4px;
  margin: 0px 4.5px;
  background: #4a4642;
  text-shadow: 10px 2px 10px white;
}
.top .right .pro .content p {
  font-size: 12px;
  color: #f9e0c0;
}
.asset {
  width: 100%;
  height: 52.8px;
  border-bottom: 1px solid #eee;
}
.asset p {
  font-size: 14px;
  line-height: 52.8px;
  margin-left: 15px;
}
.money {
  width: 100%;
  height: 80px;
  border-bottom: 10px solid #f4f4f4;
  display: flex;
  justify-content: space-around;
}
.money div p:nth-child(1) {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  font-family: PingFangSC-Light, helvetica, Heiti SC;
}
.money div p.p1 {
  font-size: 12px;
}
.money div p.p1 span {
  margin-left: 2px;
  font-size: 16px;
}
.money div p:nth-child(2) {
  font-size: 12px;
}
.money div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}
.bottoms {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 30px solid #f4f4f4;
}
.bottoms .bottom {
  width: 124px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottoms .bottom1 {
  border-bottom: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
}
.bottoms .bottom2 {
  border-bottom: 1px solid #d9d9d9;
}
.bottoms .bottom3 {
  border-right: 1px solid #d9d9d9;
}
.bottoms .bottom span {
  font-size: 26px;
  color: #737373;
}
.bottoms .bottom p {
  font-size: 12px;
}
.btn {
  width: 100%;
  height: 58px;
  border: none;
  font-size: 14px;
  background: white;
}
.box {
  margin-top: 40px;
}
@keyframes tran {
  from {
    width: 111px;
  }
  to {
    width: 120px;
  }
}
</style>
